<!--
 * Description: 系统岗位新增页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Dongxu.Ni
 * Date: 2020/03/21 05:53
-->

<template>
  <div v-loading="isRequesting">
    <!--数据表单-->
    <el-form label-width="80px" :model="formData" size="mini">
      <el-row>
        <el-col :span="24" style="padding: 0">
          <!--岗位信息-->
          <el-form-item
            :label="$t('PostManager.postInfo')"
            style="background: #c9d2ca;text-align: right"
          />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!--岗位名称-->
          <el-form-item :label="$t('PostManager.postName')">
            <el-input v-model="formData.postName" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!--父级岗位-->
          <el-form-item :label="$t('PostManager.parentPost')">
            <el-select
              v-model="formData.parentPost"
              clearable
              :placeholder="$t('select.placeholder')"
              style="width: 100%"
              @change="changeParentPost"
            >
              <el-option
                v-for="item in parentPostListOptions"
                :key="item.postId"
                :label="item.postName"
                :value="item.postId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <!--岗位描述-->
          <el-form-item :label="$t('PostManager.postDesc')">
            <el-input v-model="formData.postDesc" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="padding: 0">
          <!--岗位属性-->
          <el-form-item label="岗位属性" style="background: #c9d2ca;text-align: right" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <!--团队 ALL/PBM/GCM/NONE-->
          <el-form-item label="团队">
            <el-select
              v-model="formData.team"
              clearable
              :placeholder="$t('select.placeholder')"
              style="width: 100%"
            >
              <el-option
                v-for="item in $store.getters['enums/getTeamList']"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <!--BU类型  ALL/LNB/TNB/NONE-->
          <el-form-item label="BU类型">
            <el-select
              v-model="formData.bu"
              clearable
              :placeholder="$t('select.placeholder')"
              style="width: 100%"
            >
              <el-option
                v-for="item in $store.getters['enums/getBuList']"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <!--GCM功能类型 ALL/ME/EE/PKG/NONE-->
          <el-form-item label="GCM功能">
            <el-select
              v-model="formData.gcmFunction"
              clearable
              :placeholder="$t('select.placeholder')"
              style="width: 100%"
            >
              <el-option
                v-for="item in $store.getters['enums/getGcmFunctionList']"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="padding: 0">
          <!--绑定角色列表-->
          <el-form-item
            :label="$t('PostManager.roleList')"
            style="background: #c9d2ca;text-align: right"
          />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <!--岗位角色-->
          <el-form-item :label="$t('PostManager.postRole')">
            <el-select
              v-model="postRoleArr"
              clearable
              multiple
              :placeholder="$t('select.placeholder')"
              style="width: 100%"
            >
              <el-option
                v-for="item in roleListOptions"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span style="display: block;text-align: center;margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button size="medium" type="primary" @click="save">{{ $t('button.save') }}</el-button>
    </span>
  </div>
</template>

<script>
import { postAdd } from '../../../../api/sys/post'
import { roleListSubordinate } from '../../../../api/sys/role'

export default {
  name: 'PostAdd',
  props: {},
  data() {
    return {
      // 正在查询
      isRequesting: false,
      formData: {},
      postRoleArr: [],
      // 可选的角色下拉选项列表，所选父级岗位的角色的一级下属角色
      roleListOptions: []
    }
  },
  computed: {
    // 岗位列表
    parentPostListOptions() {
      return this.$store.getters['post/getSelfAndSubPostList']
    }
  },
  watch: {},
  created() {
    this.pageDataInit()
  },
  mounted() {},
  methods: {
    pageDataInit() {
      // 新增时默认父级岗位为当前岗位
      this.formData.parentPost = this.$store.getters['post/getSessionPostId']
      // 查询所选父级岗位的角色的一级下属角色
      this.changeParentPost(this.formData.parentPost)
    },
    async changeParentPost(newPost) {
      try {
        this.isRequesting = true
        // 查询所选父级岗位的角色的一级下属角色
        const response = await roleListSubordinate({ parentRolePost: newPost })
        this.roleListOptions = response.data
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    async save() {
      try {
        this.isRequesting = true
        const postRoleList = []
        for (const roleId of this.postRoleArr) {
          postRoleList.push({ roleId })
        }
        const data = { ...this.formData, postRoleList }
        await postAdd(data)
        this.$emit('save')
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped></style>
